<template>
  <div id="app">
    <div>
      <div class="header">
        <div class="box" >
          <h1>
            <img src="https://ghxt-atlbb.oss-cn-zhangjiakou.aliyuncs.com/image/banner1653647458000.jpg">
            <span></span>
          </h1>
          <nav >
            <router-link  to="/">点餐</router-link>
            <router-link  to="/order">订单</router-link>
            <router-link  to="/user">个人信息</router-link>
            <router-link  to="/seller">联系我们</router-link>
          </nav>
        </div>
        <div class="box">
          <h4>欢迎您！</h4>
          <nav>
            <a><router-link to="/login" v-if="showLoginAndRegister">登录</router-link></a>
            <a><router-link to="/register" v-if="showLoginAndRegister">注册</router-link></a>
            <a @click="loginOut"><router-link  v-if="!showLoginAndRegister" to="/login">退出登录</router-link></a>
          </nav>
        </div>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
import User from "./page/User";

export default {
  name: 'App',
  data(){
    return {
      nikeName: localStorage.getItem('nikeName'),
      showLoginAndRegister: ''
    }
  },
  created() {
  },
  methods: {
    loginOut(){
      //移除token，并且显示登陆和注册
      localStorage.setItem('token','')
      this.showLoginAndRegister=true
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.header{
  display: flex;
  align-items: center;
  margin-top: -60px;
  justify-content: space-between;
  height: 80px;
  background-color: #020202;
  color: #ffffff;

  /*吸顶效果*/
  /* position: sticky;
   position: -webkit-sticky;    !*兼容 -webkit 内核的浏览器*!
   top: 0px;                    !*必须设一个值，否则不生效*!*/

}
.box{
  display: flex;
  align-items: center;
}
h1{
  display: flex;
  align-items: center;
  font: normal 28px Cookie, Arial, Helvetica, sans-serif;
  padding: 0px 20px;
}
img{
  width: 40px;
  height: 40px;
}

nav {
  display: flex;
  align-items: center;
  margin: 0px 40px;
  font:16px Arial, Helvetica, sans-serif;
}
nav a{
  padding: 0 15px;
  width: 100px;
  text-decoration:none;
  color: #fff8f8;
  font-size: 16px;
  font-weight: normal;
  opacity: 0.9;
}

nav a:hover {
  opacity: 1;
}

.active {
  color: #608bd2;
  pointer-events: none;
  opacity: 1;
}

/*搜索框*/

.text{
  height: 22px;
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 3px 16px;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}
.text:focus{
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.button{
  width: 60px;
  height: 30px;
  font-size: 14px;
  margin-right: 35px;
  border: 1px solid #608bd2;
  background-color: #608bd2;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.contents{
  display: flex;
  justify-content: center;
}
.content{
  display: flex;
  width: 1400px;
  height: 1400px;
  /*background-color: #f0f2f3;*/
}

</style>
